{include file="common/header"/}
<body class="bg-light">
	<div class="container">
		<div class="d-flex">
			<div class="col-md-8">
				{foreach $top_texts as $top_text}
				<div class="card my-4">
					<div class="card-body" >
						<div class="media">
							<a href="/index/person?user_id={$top_text.user.id}" class="text-dark a-notdecoration">
								<img src="__AVATOR__{$top_text.user.avator_path}" class="img-circle img-md">
							</a>
							<div class="media-body ml-2">
								<p class="my-1"><a href="/index/person?user_id={$top_text.user.id}" class="text-dark a-notdecoration"><strong>{$top_text.user.fullname}</strong></a><span class="badge badge-primary ml-3">置顶消息</span></p>
								<p class="text-secondary"><small><i class="fa fa-clock-o"></i>&nbsp;{$top_text.create_time|format_time}</small></p>
							</div>
						</div>
						<div>
						{$top_text.content}
						</div>
						<hr class="my-1">
						<div class="row mt-3">
							{in name="$top_text.id" value="$like_list"}
							<div class="col-md text-center"><a id="if_like_{$top_text.id}" href="#" class="text-dark a-notdecoration if_like"><i class="fa fa-thumbs-up"></i>&nbsp;{$top_text.like_num}</a></div>
							{else/}
							<div class="col-md text-center"><a id="if_like_{$top_text.id}" href="#" class="text-dark a-notdecoration if_like"><i class="fa fa-thumbs-o-up"></i>&nbsp;{$top_text.like_num}</a></div>
							{/in}
	  						<div class="col-md text-center"><a href="/index/text?text_id={$top_text.id}" class="text-dark a-notdecoration"><i class="fa fa-comment"></i>&nbsp;{$top_text.reply_num}</a></div>
	  					</div>
					</div>
				</div>
				{/foreach}

				{foreach $texts as $text}
				<div class="card my-4">
					<div class="card-body" >
						<div class="media">
							<a href="/index/person?user_id={$text.user.id}" class="text-dark a-notdecoration">
								<img src="__AVATOR__{$text.user.avator_path}" class="img-circle img-md">
							</a>
							<div class="media-body ml-2">
								<div class="float-right">
									<a href="#" class="fold badge badge-primary ml-3">收起</a>
								</div>
								<p class="my-1"><a href="/index/person?user_id={$text.user.id}" class="text-dark a-notdecoration"><strong>{$text.user.fullname}</strong></a></p>
								<p class="text-secondary"><small><i class="fa fa-clock-o"></i>&nbsp;{$text.create_time|format_time}</small></p>
							</div>
						</div>
						<div class="fold-content">
						{$text.content}
						</div>
						<hr class="fold-content my-1">
						<div class="row fold-content mt-3">
							{in name="$text.id" value="$like_list"}
							<div class="col-md text-center"><a id="if_like_{$text.id}" href="#" class="text-dark a-notdecoration if_like"><i class="fa fa-thumbs-up"></i>&nbsp;{$text.like_num}</a></div>
							{else/}
							<div class="col-md text-center"><a id="if_like_{$text.id}" href="#" class="text-dark a-notdecoration if_like"><i class="fa fa-thumbs-o-up"></i>&nbsp;{$text.like_num}</a></div>
							{/in}
	  						<div class="col-md text-center"><a href="/index/text?text_id={$text.id}" class="text-dark a-notdecoration"><i class="fa fa-comment"></i>&nbsp;{$text.reply_num}</a></div>
	  					</div>
					</div>
				</div>
				{/foreach}
				<nav aria-label="Page navigation example">
				{$texts->render()}
				</nav>
			</div>
			
			<div class="col-md-4">
				{notempty name="Think.session.user_id"}
				<div class="card text-center my-4">
					<img src="__AVATOR__{$Think.session.avator_path}" class="img-circle img-md mx-auto my-3">
					<p><strong>{$Think.session.fullname}</strong></p>
					<p>{$Think.session.introduction}</p>
				</div>
				{/notempty}
				<div class="card my-4">
				    <h5 class="my-3 ml-3">可能认识的人</h5>
					{foreach $heat_user as $heat}
					<hr class="fold-content my-1">
					<div class="media ml-3">						
						<a href="/index/person?user_id={$heat.id}" class="text-dark a-notdecoration">
							<img src="__AVATOR__{$heat.avator_path}" class="img-circle img-md">
						</a>
						<div class="media-body ml-2">
							<p class="my-1"><a href="/index/person?user_id={$heat.id}" class="text-dark a-notdecoration"><strong>{$heat.fullname}</strong></a></p>
							<p class="text-secondary"><small>{$heat.introduction}</small></p>
						</div>
					</div>

					{/foreach}
				</div>
			</div>
			
		</div>	
	</div>
	<div class="container text-right">
		<p><small>互联网ICP备案：<a href="http://www.beian.miit.gov.cn/">京ICP备20005466号</a></small></p>
	</div>
</body>
{include file="common/bottom"/}


<script type="text/javascript">
	$(function(){
		$('.if_like').click(function(event) {
			event.preventDefault();
			var if_like_icon = $(this).children('i');
			var if_like = null;
			if (if_like_icon.hasClass('fa-thumbs-o-up')) {
				if_like_icon.removeClass('fa-thumbs-o-up');
				if_like_icon.addClass('fa-thumbs-up');
				if_like = 1;
			}
			else {
				if_like_icon.removeClass('fa-thumbs-up');
				if_like_icon.addClass('fa-thumbs-o-up');
				if_like = 0;
			}

			var button_id = $(this).attr('id');
			var start = button_id.lastIndexOf('_');
			var text_id = button_id.substring(start + 1);

			if (if_like == 1) {
				$.post("/index/text/addLike", {
					'text_id': text_id
				},
				function(result) {
					if (result.status == 'success') {
						setTimeout(function(){
							location.reload();
						}, 10);
	      			}
				}, "json");
			}
			if (if_like == 0) {
				$.post("/index/text/deleteLike", {
					'text_id': text_id
				},
				function(result) {
					if (result.status == 'success') {
						setTimeout(function(){
							location.reload();
						}, 10);
					}
				}, "json");
			}

		});
		$('.fold').click(function() {
			event.preventDefault();
			var status = $(this).html();
			var parents_element = $(this).parents('.card-body');
			var fold_element = parents_element.children('.fold-content');
			if (status == '收起') {
				$(this).html('展开');
				fold_element.hide();
			}
			else {
				$(this).html('收起');
				fold_element.show();
			}
		});

		// $(window).scroll(function(event) {
		// 	var window_position = $(window).scrollTop();
		// 	var window_height = $(window).height();
		// 	$('.texts').each(function(key, value) {				
		// 		var text_position = $(value).offset().top;
		// 		var text_height = $(value).outerHeight();
		// 		if (window_position < text_position + text_height * 0.3 && window_position + window_height > text_position + text_height * 0.7) {
		// 			//console.log(key);
		// 		}
		// 	});
  //   	});
	})
</script>
